<template>
  <view class="page" :data-theme="globPrimary">
    <view class="search-header">
      <view class="bg-arc"></view>
      <view class="bg-arc-img"></view>
      <view class="search-header-con">
        <view class="status-bar" :style="{ height: globStatusBarHeight + 'px' }"></view>
        <view class="navbar" :style="{ height: globNavbarHeight + 'px' }">
          <u-icon name="close" color="#fff" size="44" @click="onBack"></u-icon>
        </view>
        <view class="title">搜索机构</view>
        <view class="search" @click="$u.route('/pageUser/setting/schoolSearchResult')">
          <view class="text">输入机构名称</view>
          <u-icon name="search" color="#909399" size="40"></u-icon>
        </view>
      </view>
    </view>
    <view class="search-view">
      <view class="bar">
        <view class="text">历史搜索</view>
        <view class="remove" @click="handleRemove">清空</view>
      </view>
      <view class="view">
        <view v-if="$u.test.empty(schollSearchHistoryRecordList)" class="empty">暂无内容</view>
        <view class="list" v-else>
          <view class="label" v-for="(item, index) in schollSearchHistoryRecordList" :key="index">
            <view
              class="name"
              @click="$u.route('/pageUser/setting/schoolSearchResult', { title: item })"
              >{{ item }}</view
            >
          </view>
        </view>
      </view>
      <view class="u-flex u-justify-center">
        <view class="btn" @click="terrace">
          进入平台
          <u-icon name="arrow-rightward"></u-icon>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
import { storage } from '@/utils/storage'
export default {
  computed: {
    ...mapState({
      globSchoolId: (state) => state.projectSetting.globSchoolId,
      schollSearchHistoryRecordList: (state) => state.school.searchHistoryRecord,
    }),
    ...mapGetters({
      hasLogin: 'user/getHasLogin',
      globPrimary: 'designSetting/getGlobTheme',
      globPrimaryColor: 'designSetting/getGlobThemeColor',
      globNavbarHeight: 'projectSetting/globNavbarHeight',
      globStatusBarHeight: 'projectSetting/globStatusBarHeight',
    }),
  },
  // 监听页面返回
  onBackPress(options) {
    if (options.from === 'navigateBack') {
      return false
    }
    this.onBack()
    return true
  },
  methods: {
    // 清空历史
    handleRemove() {
      this.$store.commit('school/setSearchHistoryRecord', [])
    },
    // 进入平台
    terrace() {
      if (this.globSchoolId != 1) {
        if (this.hasLogin) {
          this.$store.dispatch('user/logout')
        }
        this.$store.commit('projectSetting/setSchoolId', 1) // 进入平台
        storage.set('edu-home-module-nav-status', 0)
        storage.set('edu-home-module-nav-list', [])
      }
      this.$u.route({
        type: 'reLaunch',
        url: '/pages/index/index',
      })
    },
    // 返回上一页
    onBack() {
      let pages = getCurrentPages()
      let page = pages[pages.length - 2]
      if (this.$u.test.empty(page)) {
        this.$u.route({ type: 'switchTab', url: 'pages/index/index' })
      } else {
        this.$u.route({ type: 'back' })
      }
    },
  },
  onLoad(options) {
    this.$store.commit('projectSetting/setSchoolState', 0)
  },
}
</script>

<style lang="scss" scoped>
.page {
  min-height: 100vh;
  background-color: #ffffff;
}
.search-header {
  position: relative;
  .bg-arc {
    width: 2000rpx;
    height: 2000rpx;
    @include bg-color();
    position: absolute;
    left: -625rpx;
    top: -1464rpx;
    border-radius: 100%;
  }
  .bg-arc-img {
    width: 750rpx;
    height: 536rpx;
    background-image: url(@/pageUser/static/images/searchorgan_bg.png);
    background-size: 750rpx 536rpx;
    position: absolute;
    left: 0;
    top: 0;
  }
  .search-header-con {
    position: relative;
    z-index: 100;
  }
  .status-bar {
    width: 100%;
  }
  .navbar {
    display: flex;
    align-items: center;
    padding: 0 30rpx;
  }
  .title {
    font-size: 56rpx;
    font-weight: 500;
    color: #ffffff;
    padding: 0 60rpx;
    margin-top: 230rpx;
  }
  .search {
    margin: 65rpx 60rpx 0;
    padding: 0 45rpx;
    height: 110rpx;
    display: flex;
    align-items: center;
    box-shadow: 2rpx 3rpx 10rpx 0 rgba(0, 0, 0, 0.08);
    border-radius: 8rpx;
    background-color: #ffffff;
    .text {
      font-size: 30rpx;
      font-weight: 400;
      color: $edu-tips-color;
    }
    .u-icon {
      margin-left: auto;
    }
  }
}
.search-view {
  padding: 0 60rpx;
  margin-top: 60rpx;
  .bar {
    display: flex;
    align-items: center;
    .text {
      font-size: 32rpx;
      font-weight: 400;
      color: $edu-main-color;
    }
    .remove {
      margin-left: auto;
      font-size: 28rpx;
      font-weight: 400;
      color: $edu-tips-color;
    }
  }
  .empty {
    margin-top: 40rpx;
    font-size: 28rpx;
    font-weight: 400;
    color: $edu-tips-color;
  }
  .view {
    min-height: calc(100vh - 880rpx);
    margin-top: 40rpx;
  }
  .list {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -14rpx;
    .label {
      padding: 0 14rpx;
      margin-bottom: 40rpx;
      .name {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 22rpx;
        height: 64rpx;
        background: #f7f7f7;
        border-radius: 32px;
      }
    }
  }
  .btn {
    margin: 0 auto;
    font-size: 32rpx;
    font-weight: 400;
    @include text-color();
    .u-icon {
      margin-left: 8rpx;
    }
  }
}
</style>
